<script lang="ts" setup>
// import { useRoute, useRouter } from "vue-router"
import { reactive, ref } from "vue"

// const route = useRoute()
// const router = useRouter()

const radio1 = ref("否")
const ruleForm = reactive({
  name: "",
  sum: 20,
  value: '正常',
  value1:[]
})
const rules = reactive({
  req: [{ required: true, message: "请输入", trigger: "blur" }]
})
const defaultProps = {
  children: 'children',
  label: 'label',
}
const data1 = [
  {
    id: 1,
    label: '物料查询',
    children: [
      {
        id: 4,
        label: '物料查询',
      },
      {
        id: 10,
        label: '购物车',
      }
    ],
  },
  {
    id: 2,
    label: '订单管理',
    children: [
      {
        id: 5,
        label: '领料单',
        children: [
      {
        id: 19,
        label: '删除领料单',
      },
      {
        id: 20,
        label: '新建领料单',
      }]
      },
      {
        id: 6,
        label: '出库单',
      },
      {
        id: 11,
        label: '配送单',
      },
      {
        id: 12,
        label: '转运单',
      },
      {
        id: 13,
        label: '出库单',
      },
      {
        id: 14,
        label: '退库单',
      },
    ],
  },
  {
    id: 15,
    label: '审批管理',
  },
  {
    id: 16,
    label: '车辆管理',
  },
  {
    id: 17,
    label: '仓库管理',
  },
  {
    id: 18,
    label: '系统管理',
  },
]
const options = [{
    value: 'guide',
    label: '物流起运部',
    des: '起运、物流大部门 包含车联网',
    children: [
      {
        value: 'disciplines',
        label: '物流中心',
        des: '物流部门 包含计划组，配送组',
        children: [
          {
            value: 'consistency',
            label: '车间1',
            children: [
          {
            value: 'consistency',
            label: '班组1',
          },
          {
            value: 'feedback',
            label: '班组2',
          },
          {
            value: 'efficiency',
            label: '班组3',
          },
          {
            value: 'controllability',
            label: '班组4',
          },
        ],
          },
          {
            value: 'feedback',
            label: '车间2',
          },
          {
            value: 'efficiency',
            label: '车间3',
          },
          {
            value: 'controllability',
            label: '车间4',
          },
        ],
      },
      {
        value: 'navigation',
        label: '综合',
        children: [
          {
            value: 'side nav',
            label: '车间1',
          },
          {
            value: 'top nav',
            label: '车间2',
          },
        ],
      },
    ],
  }]
  const props = {
  expandTrigger: 'hover' as const,
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <!-- <h2>领料单</h2> -->
      <el-form :model="ruleForm" :rules="rules" label-width="auto" status-icon style="max-width: 500px" class="m-auto pt-8">
        <el-form-item label="角色名称" prop="req" class="w-80">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="角色描述" prop="req" class="w-80">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="选择部门" prop="req">
          <el-cascader
            v-model="ruleForm.value1"
            :options="options"
            :props="props"
            style="width: 243px;"
          />
        </el-form-item>
        <el-form-item label="用户列表" prop="req" class="w-80">
          <el-select v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="状态" prop="req">
          <el-radio-group v-model="ruleForm.value">
              <el-radio-button label="正常" value="正常" />
              <el-radio-button label="冻结" value="2" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择电脑端权限" prop="req">
          <el-tree
              style="max-width: 600px"
              :data="data1"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps"
            />
        </el-form-item>
        <el-form-item label="选择小程序权限" prop="req">
          <el-tree
              style="max-width: 600px"
              :data="data1"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps"
            />
        </el-form-item>
        <div class="text-right py-5">
          <el-button>取消</el-button>
          <el-button type="primary">确认</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style>
.el-divider--horizontal {
  margin: 0 0 18px 0;
}
</style>
